{% block sw_settings_rule_detail_assignments %}
<div class="sw-settings-rule-detail-assignments">
    {% block sw_settings_rule_detail_assignments_entity_cards %}
    <mt-card
        v-for="entity in associationEntities"
        :key="entity.id"
        class="sw-settings-rule-detail-assignments__card"
        position-identifier="sw-settings-rule-detail-assignments-entity"
        :class="`sw-settings-rule-detail-assignments__card-${entity.id}`"
        :title="$tc(entity.label)"
    >
        <template #toolbar>
            {% block sw_settings_rule_detail_assignments_toolbar %}
            <sw-card-filter
                :placeholder="$t('global.sw-simple-search-field.defaultPlaceholder')"
                @sw-card-filter-term-change="onFilterEntity(entity, $event)"
            >
                <template
                    v-if="entity.allowAdd"
                    #filter
                >
                    {% block sw_settings_rule_detail_assignments_add_button %}
                    <mt-button
                        v-tooltip="getTooltipConfig(entity)"
                        :disabled="disableAdd(entity) || !acl.can('rule.editor')"
                        ghost
                        size="small"
                        class="sw-settings-rule-detail-assignments__add-button"
                        variant="primary"
                        @click="onOpenAddModal(entity)"
                    >
                        {{ $tc('sw-settings-rule.detail.buttonAddAssignment') }}
                    </mt-button>
                    {% endblock %}
                </template>
            </sw-card-filter>
            {% endblock %}
        </template>

        <template #grid>
            {% block sw_settings_rule_detail_assignments_entity_listing %}
            <sw-settings-rule-assignment-listing
                v-if="entity.loadedData && entity.loadedData.length > 0"
                class="sw-settings-rule-detail-assignments__entity-listing"
                :class="`sw-settings-rule-detail-assignments__entity-listing-${entity.id}`"
                :is-loading="isLoading"
                :detail-route="entity.detailRoute"
                :items="entity.loadedData"
                :repository="entity.repository"
                :local-mode="false"
                :criteria-limit="5"
                :allow-delete="allowDeletion(entity) && acl.can('rule.editor')"
                :allow-inline-edit="false"
                :show-settings="false"
                :show-selection="allowDeletion(entity) && acl.can('rule.editor')"
                :allow-column-edit="false"
                :steps="associationSteps"
                :columns="entity.gridColumns"
                :full-page="false"
                :compact-mode="false"
                @delete-items="(event) => onDeleteItems(entity, event)"
            >
                <template #link-column="{ item, column, renderColumn }">
                    <router-link
                        v-if="column.routerLink"
                        :to="getRouterLink(entity, item)"
                    >
                        <sw-product-variant-info
                            v-if="item.variation"
                            :variations="item.variation"
                        >
                            {{ renderColumn(item, column) }}
                        </sw-product-variant-info>
                        <span v-if="!item.variation">
                            {{ renderColumn(item, column) }}
                        </span>
                    </router-link>
                    <span v-else>
                        <sw-product-variant-info
                            v-if="item.variation"
                            :variations="item.variation"
                        >
                            {{ renderColumn(item, column) }}
                        </sw-product-variant-info>
                        <span v-else>
                            {{ renderColumn(item, column) }}
                        </span>
                    </span>
                </template>
                <template #actions="{ item }">
                    {% block sw_settings_rule_detail_assignments_entity_listing_actions %}
                    {% block sw_settings_rule_detail_assignments_entity_listing_view_action %}
                    <sw-context-menu-item :router-link="getRouterLink(entity, item)">
                        {{ $tc('global.default.view') }}
                    </sw-context-menu-item>
                    {% endblock %}
                    {% block sw_settings_rule_detail_assignments_entity_listing_delete_action %}
                    <sw-context-menu-item
                        v-if="entity.deleteContext && acl.can('rule.editor')"
                        variant="danger"
                        @click="onOpenDeleteModal(entity, item)"
                    >
                        {{ $tc('global.default.remove') }}
                    </sw-context-menu-item>
                    {% endblock %}
                    {% endblock %}
                </template>

                <template #bulk-modal-delete-confirm-text="{ selectionCount }">
                    {{ $tc('sw-settings-rule.detail.textModalBulkDelete', { count: selectionCount }, selectionCount) }}
                </template>

                <template #bulk-modal-delete-items="{ isBulkLoading, deleteItems }">
                    <mt-button
                        variant="critical"
                        size="small"
                        :is-loading="isBulkLoading"
                        @click="deleteItems"
                    >
                        {{ $tc('global.default.remove') }}
                    </mt-button>
                </template>
            </sw-settings-rule-assignment-listing>

            {% block sw_settings_rule_detail_assignments_empty_state %}
            <mt-empty-state
                v-else
                class="sw-settings-rule-detail-assignments__entity-empty-state"
                :class="`sw-settings-rule-detail-assignments__entity-empty-state-${entity.id}`"
                :icon="$route?.meta?.$module?.icon"
                :headline="$tc('sw-settings-rule.detail.hasNoAssociations')"
            />
            {% endblock %}
            {% endblock %}
        </template>
    </mt-card>
    {% endblock %}

    {% block sw_settings_rule_detail_assignments_delete_modal %}
    <sw-modal
        v-if="deleteModal"
        class="sw-settings-rule-detail-assignments__delete-modal"
        :title="$tc('sw-settings-rule.detail.titleModalDelete')"
        variant="small"
        @modal-close="onCloseDeleteModal"
    >

        {% block sw_settings_rule_detail_assignments_delete_modal_text %}
        <p class="sw-settings-rule-detail-assignments__delete-text">
            {{ $tc('sw-settings-rule.detail.textModalDelete') }}
        </p>
        {% endblock %}

        {% block sw_settings_rule_detail_assignments_delete_modal_footer %}
        <template #modal-footer>

            {% block sw_settings_rule_detail_assignments_delete_modal_cancel %}
            <mt-button
                class="sw-settings-rule-detail-assignments__delete-modal-cancel-button"
                size="small"
                variant="secondary"
                @click="onCloseDeleteModal"
            >
                {{ $tc('global.default.cancel') }}
            </mt-button>
            {% endblock %}

            {% block sw_settings_rule_detail_assignments_delete_modal_confirm %}
            {% block sw_settings_rule_detail_assignments_delete_modal_confirm_single %}
            <mt-button
                class="sw-settings-rule-detail-assignments__delete-modal-delete-button"
                size="small"
                variant="critical"
                @click="onDelete"
            >
                {{ $tc('global.default.remove') }}
            </mt-button>
            {% endblock %}
            {% endblock %}
        </template>
        {% endblock %}
    </sw-modal>
    {% endblock %}

    {% block sw_settings_rule_detail_assignments_add_modal %}
    <sw-settings-rule-add-assignment-modal
        v-if="addModal"
        :rule="rule"
        :entity-context="addEntityContext"
        @entities-saved="onEntitiesSaved"
        @close-add-modal="onCloseAddModal"
    />
    {% endblock %}
</div>
{% endblock %}
